import React from 'react';
import styles from './style';
import {View,SafeAreaView,Image,Text,TouchableOpacity,ScrollView} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back'
import { FlatList } from 'react-native-gesture-handler';
import { installReactHook } from 'react-native/Libraries/Performance/Systrace';
const downImg = require('../../img/downImg.png');
export default class Review extends React.Component{
  constructor(props) {
    super(props),
    this.state = {
      list :[
        {id:'1',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        },
        {id:'2',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        },
        {id:'3',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        }
      ],
      tab:['审核中','审核成功', '审核失败'],
      tabStatus:0,
      title:'审核中'
    }
  }
  render() {
    let {navigation} = this.props
    let {list,tab,tabStatus,title} = this.state
    const rederItem = ({item,index}) => {
      return (
          <Animatable.View animation='slideInUp' style={styles.fansStyle} key={item.id} >
          <Image source={item.img} style={styles.fansImg}></Image>
           <View style={styles.nameStyle}>
            <Text style={styles.topText}>{item.name}</Text>
            <Text style={styles.bottomText}>提交时间{item.time}</Text>
           </View>
           <View style={styles.titleStyle}>
          <Text style={[{color:'#ccc',fontSize:12}]}>{title}</Text>
          </View>
          </Animatable.View>
      )
    }
    const tabClick=((index) => {
      const title = tab[index]
      this.setState({tabStatus:index,title:title})
    })
    return (
      <SafeAreaView style={styles.fans}>
        <Back navigation={navigation}></Back>
        <View style={[{flexDirection:'row'}]}>
    <Text style={styles.fansText}>审核进度</Text>
        </View>
        <View style={styles.tabStyle}>
          {
              tab.map((item,index) => {
                return (
               <TouchableOpacity onPress={() => tabClick(index)} key={item}>
                  <View style={[styles.tabList,{backgroundColor:tabStatus == index ? '#101010' : '#fff'}]}>
                    <Text style={[styles.tabText,{color:tabStatus == index ? '#fff' : '#101010'}]}>{item}</Text>
                 </View>
               </TouchableOpacity>
              
                )
              })
          }
        </View>
        <FlatList data={list} renderItem={rederItem}></FlatList>
      </SafeAreaView>
    )
  }
}
